<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="" rel="stylesheet">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{m}}
        </div>
        <div id="app4">
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>
        <div id="app5">
            <p>{{m}}</p>
            <button v-on:click="f">反转</button>
        </div>
        <div id="app6">
            <p>{{m}}</p>
            <input type="text" v-model="m">
        </div>

        <div id="app7">
            <ul>
                <todo v-for="item in mylist" v-bind:item="item"></todo>
            </ul>
        </div>

        <script>
        Vue.component('todo',{
            props:['item'],
            template:'<li>{{item.text}}</li>'
        });
        var app=new Vue({
            el:"#app",
            data:{
                m:"hello vue!"
            }
        });
        var app4=new Vue({
            el:'#app4',
            data:{
                todos:[
                    {text:'111'},
                    {text:'222'},
                    {text:'333'}
                ]
            }
        });
        var app5=new Vue({
            el:'#app5',
            data:{
                m:'老张， 吃了没？'
            },
            methods:{
                f:function(){
                    this.m=this.m.split(' ').reverse().join(' ');
                }
            }
        });
        var app6=new Vue({
            el:'#app6',
            data:{
                m:"hello world!"
            }
        });
        var app7=new Vue({
            el:'#app7',
            data:{
                mylist:[
                    {text:'111'},
                    {text:'222'},
                    {text:'333'}
                ]
            }
        });
        app7.mylist[3].text='555';
        </script>
    </body>
</html>